import React, { PropTypes } from 'react';
import 'expose?Tether!tether';
import 'imports?jQuery=jquery,Tether=tether!semantic-ui/dist/semantic.min.js';
import 'semantic-ui/dist/semantic.min.css';
import './index.scss';
import $ from 'jquery';



export default class Menu extends React.Component {

    static defaultProps = {
        menuBtn:'Menu',
        menuIcon:'sidebar icon',
        btnConfig:[
            {
                icon:'home icon',
                btn:'Home',
            },{
                icon:'block layout icon',
                btn: 'Topics',
            },{
                icon:'smile icon',
                btn:'Friends',
            },{
                icon:'calendar icon',
                btn:'History',
            }
        ],
        content:'最终幻想',
        title:'最终幻想'
    }

    static PropTypes = {
        menuIcon: PropTypes.string,
        menuBtn:PropTypes.string,
        btnConfig: PropTypes.array,
        content: PropTypes.object,
        title: PropTypes.object,

    }

    constructor(props) {
        super(props)
        this.state = {
            btnConfig: props.btnConfig,

        }
    }

    componentDidMount() {
        $('.uiItem')
            .sidebar({
                context:$('.context .bottom.segment')
            })
            .sidebar('attach events', '.uiMenu .item');
    }


    render() {
        const {
            title,
            content,
            btnConfig,
            menuIcon,
            menuBtn,

        } = this.props;

       
        return(
            <div className='context'>
                <div className="ui top attached demo menu uiMenu">
                    <a className="item"><i className={menuIcon}></i> {menuBtn} </a>
                    <h3 className="uiTitle">{title}</h3>
                </div>
                <div className="ui bottom attached segment pushable">
                    <div className="ui inverted labeled icon left inline vertical sidebar menu uiItem">
                        {
                            this.state.btnConfig.map((item, index) => {
                                //todo 增加按钮下拉或者弹出 二级菜单
                                return(
                                    <a className="item" key={index}><i className={item.icon}></i>{item.btn}</a>
                                )
                            })
                        }
                    </div>
                    <div className="pusher uiContent">
                        <div className="ui basic segment">
                            {content}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}